<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="../statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="../statics/css/index.css">
    <style>
        .card {
            margin-top: 1rem;
        }
    </style>
</head>

<body class="first">
    <div class="container">
        <div class="row">
            <div class="col-sm"></div>
            <div class="col-sm">
                <div class="card" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal"
                                    data-target="#saysomething">发表说说</button>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <p>当前用户：{{username}}</p>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-end"><button type="button"
                                    class="btn btn-secondary btn-sm" onclick="logout()">注销</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-sm"></div>
        </div>

        <div class="row">
            <div class="col-sm">
            </div>
            <div class="col-sm" id="saysaymsg">
                {% for msg in msgs %}
                <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-10" style="font-size: 25px;">{{msg.content}}</div>
                            <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                    data-toggle="modal" data-target="#comment"
                                    onclick="sayComment('{{msg.id}}')">吐槽一下</button>
                                
                            </div>

                        </div>

                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="{{msg.id}}">
                            {% for comment in msg.comments %}
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0">
                                    <p style="font-size: 17px;">{{comment.content}}</p>
                                    <footer class="blockquote-footer" style="text-align: right;">
                                        <cite title="Source Title">{{comment.comUserName}}</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            {% endfor %}
                        </ul>

                    </div>
                </div>
                {% endfor %}


            </div>
            <div class="col-sm">
            </div>
        </div>
    </div>


    <!-- 发表说说  -->
    <div class="modal fade" id="saysomething" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="sayMsg">

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saysay()">发表</button>

                </div>
            </div>
        </div>
    </div>

    <!-- 吐槽一下 -->

    <div class="modal fade" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">吐槽一下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                </div>

                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" aria-describedby="passwordHelpInline"
                                id="commentMsg">

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="comment()">吐槽</button>
                </div>
            </div>
        </div>
    </div>




    <nav aria-label="Page navigation example">
        <ul class="pagination" style="text-align: center; margin-left: 138px;">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous" onclick="pn(2)">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" onclick="fyNum(1)" href="#">1</a></li>
            <li class="page-item"><a class="page-link" onclick="fyNum(2)" href="#">2</a></li>
            <li class="page-item"><a class="page-link" onclick="fyNum(3)" href="#">3</a></li>
            <li class="page-item"><a class="page-link" onclick="fyNum(4)" href="#">4</a></li>
            <li class="page-item"><a class="page-link" onclick="fyNum(5)" href="#">5</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next" onclick="add(1)">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>




    <script src="../statics/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="../statics/js/bootstrap.min.js"></script>






    
    




    <script>

        function fyNum(n){

            axios({
            method: 'get',
            url: `/home/fy/num?n=${n}`
        }).then(function (response) {
            console.log(response);
            let html=response;
            $('#saysaymsg').empty();
            $('#saysaymsg').append(html.data);

        }).catch((err) => {

        });
        }


        function pn(n){

            fyNum(n-1)
        }

        function add(n){
            fyNum(n+1)
        }




        let currentMsgId = '';

        function sayComment(msgId) {
            currentMsgId = msgId;
        }



        function saysay() {
            axios({
                method: 'post',
                url: '/say',
                data: {
                    sayMsg: $('#sayMsg').val()
                }
            }).then(function (response) {

                let res = response.data;
                if (res.code === 200) {

                    let data = JSON.parse(res.data);
                    let html = `
                    <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-10" style="font-size: 25px;">${data.content}</div>
                            <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                    data-toggle="modal" data-target="#comment" onclick="sayComment(${data.id})">吐槽一下</button>
                                    
                            </div>
                           
                        </div>

                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="${data.id}">
                        </ul>

                    </div>
                </div>
                `

                    $("#saysaymsg").prepend(html);


                }
            })
        }

        function comment() {
            axios({
                method: 'post',
                url: '/comment',
                data: {
                    commentMsg: $('#commentMsg').val(),
                    msgId: currentMsgId
                },
            }).then(function (response) {

                let res = response.data;
                if (res.code === 200) {

                    let data = res.data;
                    let html = `
        <li class="list-group-item">
            <blockquote class="blockquote mb-0">
                <p style="font-size: 17px;">${data.content}</p>
                <footer class="blockquote-footer" style="text-align: right;">
                    <cite title="Source Title">${data.fromUserName}</cite>&nbsp;&nbsp;对
                    <cite title="Source Title">${data.toUserName}</cite>&nbsp;&nbsp;说
                </footer>
            </blockquote>
        </li>
        `;


                    $("#" + data.msgId).append(html);
                } else {
                    console.log('2000判断不通过');
                }
            }).catch((err) => {
                console.log(err);
            });
        }

        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {

                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }

    </script>




</body>

</html>